<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @cancel="handleCancel">
    <a-form>
      <a-row>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.biao-ti-gao-du')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number v-model="style.titleHeight" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-biao-ti-gao-du')" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.biao-tou-gao-du')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number v-model="style.headerHeight" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-biao-tou-gao-du')" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.gao-du')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number v-model="style.height" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-gao-du')" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <!--<a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.biao-tou-bei-jing-se')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number v-model="style.headerBackgroundColor" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-biao-tou-bei-jing-se')" style="width: 100%"/>
          </a-form-item>
        </a-col>-->
        <a-col :span="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
            <template slot="label">
              {{$t('m.eform.formDesign.label.zi-ding-yi-yang-shi-lei')}}
              <ych-help helpCode="exportCustomStyleClass" style="padding-left: 8px;"></ych-help>
            </template>
            <a-input v-model="style.customStyleClass" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-zi-ding-yi-yang-shi-lei')"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      <a-button key="submit" type="primary" @click="handleOk">{{ $t('m.common.button.ok') }}</a-button>
    </template>
  </ych-modal>
</template>

<script>

  import kCheckbox from "../designer/packages/KCheckbox/index";
  import YchHelp from '@/components/ych/YchHelp'

  export default {
    name: 'GlobalExportStyleDialog',
    components: {
      kCheckbox,
      YchHelp,
    },
    data() {
      return {
        title: this.$t('m.common.label.operate'),
        visible: false,
        style: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 18},
        },
      }
    },
    methods: {
      open(json) {
        this.title = this.$t('m.eform.formDesign.label.dao-chu-quan-ju-yang-shi-pei-zhi')
        this.style = (json && json != '') ? JSON.parse(json) : {}
        this.visible = true
      },

      handleOk() {
        // TODO 修复Bug
        if (Object.keys(this.style).length > 0) {
          this.$emit('selectFinished', JSON.stringify(this.style))
        } else {
          this.$emit('selectFinished', '')
        }
        this.visible = false
      },
      handleCancel() {
        this.visible = false
      },
    }
  }
</script>
